<!--  -->
<template>
  <div class="dashboard">
    <template v-if="data">
      <div class="dashboard-top">
        <el-row>
          <el-col :span="4">
            <div class="grid-content">
              采集{{ data.numberOfArchives.totalCount }}份
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content">
              整理{{ data.numberOfArchives.organized }}份
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content">
              未整理{{ data.numberOfArchives.unorganized }}份
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content">
              删除{{ data.numberOfArchives.deleted }}份
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content">
              借阅{{ data.numberOfArchives.lend }}份
            </div>
          </el-col>
          <el-col :span="4">
            <div class="grid-content">
              资料库{{ data.numberOfArchives.database }}份
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="dashboard-person-infor">
        <div class="dashboard-person-infor-sex" id="personSex"></div>
        <div class="dashboard-person-infor-age" id="personAge"></div>
        <div
          class="dashboard-person-infor-edu"
          id="personMedicalInsuranceType"
        ></div>
      </div>
    </template>
    <template>
      <div style="padding: 20px">
        <el-form>
          <el-form-item label="时间：">
            <el-date-picker
              v-model="setDates"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="dateChange"
            ></el-date-picker>
          </el-form-item>
        </el-form>
      </div>
      <div class="dashboard-files-infor">
        <div class="dashboard-files-infor-compare" id="compareSort"></div>
      </div>
    </template>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { homeData, homeBarDate } from "@/api/index.js";
import moment from "moment";
export default {
  components: {},
  data() {
    return {
      data: null,
      age: {
        name: [],
        value: [],
      },
      sex: {
        name: [],
        value: [],
      },
      medicalInsuranceType: {
        name: [],
        value: [],
      },
      mongth: {
        name: [],
        cj: [],
        zl: [],
      },
      setDates: [],
    };
  },
  computed: {},
  watch: {},
  //方法集合
  methods: {
    getHomeData() {
      let _this = this;
      let data = {};
      homeData(data).then((res) => {
        if (res.code == 200) {
          this.data = res.data;
          if (this.data.sex && this.data.sex.length > 0) {
            this.sex = this.handleArr(this.data.sex);
          }
          if (this.data.age && this.data.age.length > 0) {
            this.age = this.handleArr(this.data.age);
          }
          if (
            this.data.medicalInsuranceType &&
            this.data.medicalInsuranceType.length > 0
          ) {
            this.medicalInsuranceType = this.handleArr(
              this.data.medicalInsuranceType
            );
          }

          this.$nextTick(() => {
            this.personSexPie();
            this.personAgePie();
            this.personMedicalInsuranceTypePie();
          });
        }
      });
    },
    dateChange() {
      this.isBar = false;
      let beginTime = this.setDates.length > 0 ? this.setDates[0] : "";
      let endTime = this.setDates.length == 2 ? this.setDates[1] : "";
      this.getHomeBarDate(beginTime, endTime);
    },
    getHomeBarDate(beginTime, endTime) {
      let that = this;
      homeBarDate(beginTime, endTime).then((res) => {
        if (res.code == 200) {
          if (res.data && res.data.length > 0) {
            that.mongth = that.handleArr2(res.data);
          } else {
            that.mongth = [];
          }

          this.$nextTick(() => {
            that.filesSortBar();
          });
        }
      });
    },
    handleArr(arr) {
      let name = [],
        value = [];
      arr.forEach((item) => {
        name.push(item.name);
        value.push(item.value);
      });
      return { name, value };
    },
    handleArr2(arr) {
      let name = [],
        cj = [],
        zl = [];
      arr.forEach((item) => {
        name.push(item.name);
        cj.push(item.cj);
        zl.push(item.zl);
      });
      return { name, cj, zl };
    },
    personSexPie() {
      var chartDom = document.getElementById("personSex");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: "按性别",
          x: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "horizontal",
          y: "bottom",
          x: "center",
        },
        series: [
          {
            name: "按性别",
            type: "pie",
            radius: "50%",

            label: {
              show: true,
              formatter(param) {
                return param.name + "\n" + param.value;
              },
              fontSize: 16,
            },
            data: this.data.sex,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      option && myChart.setOption(option);
    },
    personAgePie() {
      var chartDom = document.getElementById("personAge");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: "按年龄",
          x: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "horizontal",
          y: "bottom",
          x: "center",
        },

        series: [
          {
            name: "按年龄",
            type: "pie",
            radius: "50%",
            label: {
              show: true,
              formatter(param) {
                return param.name + "\n" + param.value + "人";
              },
              fontSize: 16,
            },
            data: this.data.age,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      option && myChart.setOption(option);
    },
    personMedicalInsuranceTypePie() {
      var chartDom = document.getElementById("personMedicalInsuranceType");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: "按报销类型",
          x: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "horizontal",
          y: "bottom",
          x: "center",
        },

        series: [
          {
            name: "按报销类型",
            type: "pie",
            radius: "50%",
            color: ["#91c7ae", "#fc8251"],
            label: {
              show: true,
              formatter(param) {
                return param.name + "\n" + param.value + "人";
              },
              fontSize: 16,
            },
            data: this.data.medicalInsuranceType,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };

      option && myChart.setOption(option);
    },
    eduSortBar() {
      var chartDom = document.getElementById("eduSort");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          formatter: function (params) {
            var item = params[0];
            return `<span style="margin-bottom:6px;display:block">${item.axisValueLabel}</span>${item.marker} ${item.seriesName}:<span style="width:60px;display:inline-block;text-align:right">${item.value}人</span>`;
          },
        },
        legend: {},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
        },
        yAxis: {
          type: "category",
          data: this.education.name,
        },
        series: [
          {
            name: "按学历分类",
            type: "bar",
            label: {
              show: true,
              position: "outside",
              formatter(param) {
                return param.value + "人";
              },
            },
            data: this.education.value,
          },
        ],
      };

      option && myChart.setOption(option);
    },
    ageSortBar() {
      var chartDom = document.getElementById("ageSort");
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          formatter: function (params) {
            var item = params[0];
            return `<span style="margin-bottom:6px;display:block">${item.axisValueLabel}</span>${item.marker} ${item.seriesName}:<span style="width:60px;display:inline-block;text-align:right">${item.value}人</span>`;
          },
        },
        legend: {},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          boundaryGap: [0, 0.01],
        },
        yAxis: {
          type: "category",
          data: this.age.name,
        },
        series: [
          {
            name: "按年龄分类",
            type: "bar",
            color: ["#fc8251"],
            label: {
              show: true,
              position: "outside",
              formatter(param) {
                return param.value + "人";
              },
            },
            data: this.age.value,
          },
        ],
      };

      option && myChart.setOption(option);
    },

    filesSortBar() {
      var chartDom = document.getElementById("compareSort");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        title: {
          text: "采集整理对比",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {},
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: this.mongth.name,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "采集",
            type: "bar",
            barGap: 0,
            label: {
              show: true,
              position: "top",
              formatter(param) {
                return param.value + "人";
              },
            },
            data: this.mongth.cj,
          },
          {
            name: "整理",
            type: "bar",
            label: {
              show: true,
              position: "top",
              formatter(param) {
                return param.value ? param.value + "人" : "";
              },
            },
            data: this.mongth.zl,
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    var xx = document.getElementById("compareSort");
    console.log("xx", xx);
    var yy = document.getElementById("personSex");
    console.log("yy", yy);
    this.$nextTick(() => {
      var xxx = document.getElementById("compareSort");
      var yyy = document.getElementById("personSex");
      console.log("next xxx", xxx);
      console.log("next yyy", yyy);
    });
    this.getHomeData();
    // 获取当前月份第一天
    let startTime = moment().startOf("month").format("YYYY-MM-DD");
    let endTime = moment().endOf("month").format("YYYY-MM-DD");
    this.setDates = [startTime, endTime];
    this.getHomeBarDate(startTime, endTime); // 有问题
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.dashboard {
  &-top {
    font-size: 20px;
    .grid-content {
      height: 80px;
      line-height: 80px;
      text-align: center;
      border-right: 1px #ccc solid;
      border-bottom: 1px #ccc solid;
    }
  }
  &-person-infor {
    width: 100%;
    display: flex;
    padding: 20px 0 40px;
    &-sex {
      width: 29%;
      height: 300px;
    }
    &-edu {
      width: 35%;
      height: 300px;
    }
    &-age {
      width: 35%;
      height: 300px;
    }
  }
  &-files-infor {
    padding: 0 20px;
    box-sizing: border-box;
    width: 100%;
    height: 300px;
    &-compare {
      width: 100%;
      height: 240px;
    }
  }
}
</style>